<template>
	<view class="contain">
		<input class="ipt1" type="text" name="" id="" placeholder="请输入姓" v-model="firstName">
		<input class="ipt2" type="text" name="" id="" placeholder="请输入名" v-model="lastName">
		<view class="fullName">
			{{fullName}}
		</view>
		<view class="fullName">
			{{fullName}}
		</view>
		<view class="fullName">
			{{fullName}}
		</view>
	</view>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
	const firstName = ref('')
	const lastName = ref('')
	const fullName = computed(()=>{
		console.log('只调用了一次');
		return firstName.value +'-'+  lastName.value
	})
	// const fullName =()=>{
	// 	console.log('调用了多次');
	// 	return firstName.value +'-'+  lastName.value
	// }
</script>

<style scoped lang="scss">
	.contain{
		margin: 0 10px;
		input{
			padding: 0 10px;
			box-sizing: border-box;
			height: 30px;
			border: 1px solid #ccc;
			
			margin-top: 20px;
		}
		view{
			margin-top: 10px;
		}
	}
</style>
